<template>
  <div class="main">
    <el-form ref="form" :model="form" label-width="140px" label-position="left">
      <el-form-item label="头像:">
        <el-avatar shape="square" :size="120" :src="form.squareUrl"></el-avatar>
      </el-form-item>
      <el-form-item label="能力创建者:">
        <el-input v-model="form.createBy"></el-input>
      </el-form-item>
      <el-form-item disabled="true" label="能力ID:">
        <el-input disabled v-model="form.uuid"></el-input>
      </el-form-item>
      <el-form-item label="能力编码:">
        <el-input v-model="form.coding"></el-input>
      </el-form-item>
      <el-form-item label="能力名称（中文）:">
        <el-input v-model="form.serviceNameC"></el-input>
      </el-form-item>
      <el-form-item disabled="true" label="能力名称（英文）:">
        <el-input disabled v-model="form.serviceNameE"></el-input>
      </el-form-item>
      <el-form-item label="上传文档:">
        <el-upload class="upload-demo">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="可见性:">
        <el-select v-model="form.visibility" placeholder="" :disabled="true">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分组:">
        <el-input v-model="form.group"></el-input>
      </el-form-item>
      <el-form-item label="能力描述:">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="服务定义">
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="能力对外URL:">
        <el-input v-model="form.url" :disabled="true"></el-input>
      </el-form-item>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="GET"></el-checkbox>
        <el-checkbox label="POST"></el-checkbox>
        <el-checkbox label="PUT"></el-checkbox>
        <el-checkbox label="DELETE"></el-checkbox>
        <el-checkbox label="PATCH"></el-checkbox>
        <el-checkbox label="HEAD"></el-checkbox>
        <el-checkbox label="OPITION"></el-checkbox>
      </el-checkbox-group>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane label="Tab1" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="参数名称" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="100">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>参数名称: {{ scope.row.name }}</p>
                <p>参数类型: {{ scope.row.type }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.desc }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="参数类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数据类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.data }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.demand }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tab-bottom">
          <el-form>
            <el-input v-model="query"></el-input>
            <span style="color:blue;"><i class="el-icon-plus"></i>添加参数</span>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Tab2" name="second">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="参数名称" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="100">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>参数名称: {{ scope.row.name }}</p>
                <p>参数类型: {{ scope.row.type }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.desc }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="参数类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数据类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.data }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.demand }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tab-bottom">
          <el-form>
            <el-input v-model="query"></el-input>
            <span style="color:blue;"><i class="el-icon-plus"></i>添加参数</span>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Tab3" name="third">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column label="参数名称" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="100">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>参数名称: {{ scope.row.name }}</p>
                <p>参数类型: {{ scope.row.type }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.desc }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="参数类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数据类型" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.data }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 0px">{{ scope.row.demand }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tab-bottom">
          <el-form>
            <el-input v-model="query"></el-input>
            <span style="color:blue;"><i class="el-icon-plus"></i>添加参数</span>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Content',
  data() {
    return {
      form: {
        squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        createBy: '',
        uuid: '',
        coding: '',
        serviceNameC: '',
        serviceNameE: '',
        visibility: '',
        group: '',
        desc: '',
        url: 'http:3000//22.com/cn'
      },
      query:'111',
      checkList: ['GET',],
      activeName: 'first',
      tableData: [{
        name: '20949',
        desc: '描述111',
        type: '参数类型1112',
        data: '数据类型111',
        demand: '需求哈哈',
      },
      {
        name: '20949',
        desc: '描述111',
        type: '参数类型1112',
        data: '数据类型111',
        demand: '需求哈哈',
      },
      {
        name: '20949',
        desc: '描述111',
        type: '参数类型1112',
        data: '数据类型111',
        demand: '需求哈哈',
      },
      ],

    }
  },
  destroyed() {
    this.$store.state.fuwu.serviceNameC=this.form.serviceNameC
    this.$store.state.fuwu.createBy=this.form.createBy
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getQuery(){
      this.form.createBy = this.$store.state.fuwu.createBy
      this.form.serviceNameE = this.$store.state.fuwu.serviceNameE
      this.form.serviceNameC = this.$store.state.fuwu.serviceNameC
      this.form.url = this.$store.state.fuwu.url
      this.form.uuid = this.$store.state.fuwu.uuid
    }
  },
  mounted(){
    this.getQuery();
  }
}
</script>

<style scoped>
  .tab-bottom{
    height: 50px;
    line-height: 50px;
    background: #f1f1f1;
  }
  .tab-bottom .el-input{
    width:30%;
    margin-left:20px;
  }
  .main .el-checkbox-group{
    min-width:800px
  }
</style>
